<template>
  <view class="container">
    <view style="position: absolute;left: 50rpx;top: 100rpx;" @click="$u.route({type: 'back', delta: 1})">
      <u-icon name="arrow-left" color="#fff" size="40"></u-icon>
    </view>
    <view class="u-f-ajc">
      <LotteryDraw @get_winingIndex='get_winingIndex' @luck_draw_finish='luck_draw_finish' :grid_info_arr="prizeList">
      </LotteryDraw>
    </view>

    <!-- lottery -->
    <view class="almost-lottery__wheel">
      <view class="almost-lottery__count" v-if="goods.length">
        <text
          class="text">{{current === -1 ? '请选择商品进行抽奖' : `${goods[current].title}剩余抽奖${goods[current].draw_num}次`}}</text>
      </view>
    </view>

    <u-radio-group v-model="current">
      <view class="goods_list" v-if="goods.length">
        <view class="goods_item u-f" v-for="(item, index) in goods" :key="index" @click="change(index)">
          <view class="u-f-ac">
            <view>
              <!-- <u-checkbox v-model="item.checked" :name="index" shape="circle" active-color="#FC3D42" size="38"
                @change="change">
              </u-checkbox> -->
              <u-radio :name="index" shape="circle" active-color="#FC3D42" size="40"></u-radio>
            </view>
            <image :src="item.logo" mode="" class="goods_image"></image>
          </view>
          <view class="right_box">
            <view class="text-overflow goods_title">{{item.title}}</view>
            <view class="price">￥{{item.price}}</view>
            <view class="price">转卖收益转化比例:{{item.draw_rate}}</view>
            <view style="color: #666;">剩余抽奖次数:{{item.draw_num}}次</view>

          </view>
        </view>
      </view>
    </u-radio-group>

    <!-- <view class="kuang_box u-f-ajc u-f-column">
      <view class="kuang_item u-f-ac u-f-jsb">
        <view>金额10%</view>
        <view>0个</view>
      </view>
      <view class="kuang_item u-f-ac u-f-jsb">
        <view>金额20%</view>
        <view>0个</view>
      </view>
      <view class="kuang_item u-f-ac u-f-jsb">
        <view>金额30%</view>
        <view>0个</view>
      </view>
    </view> -->

    <u-mask :show="showMask" @click="showMask = false">
      <view class="u-f-ajc" style="height: 100%;">
        <image :src="cjImg" mode="widthFix" style="width: 60%;"></image>
      </view>
    </u-mask>
  </view>
</template>

<script>
  import LotteryDraw from '@/components/SJ-LotteryDraw/SJ-LotteryDraw.vue';

  import * as API_Haibao from '@/api/haibao.js';

  export default {
    components: {
      LotteryDraw
    },
    data() {
      return {
        // 奖品数据
        prizeList: [{
            logo: "/static/yushi/cj/jinbi.png",
            text: "20"
          },
          {
            logo: "/static/yushi/cj/jinbi.png",
            text: "40"
          },
          {
            logo: "/static/yushi/cj/jinbi.png",
            text: "80"
          },
          {
            logo: "/static/yushi/cj/jinbi.png",
            text: "120"
          },
          {
            logo: "/static/yushi/cj/jinbi.png",
            text: "谢谢参与"
          },
          {
            logo: "/static/yushi/cj/jinbi.png",
            text: "160"
          },
          {
            logo: "/static/yushi/cj/jinbi.png",
            text: "200"
          },
          {
            logo: "/static/yushi/cj/jinbi.png",
            text: "300"
          },
          {
            logo: "/static/yushi/cj/jinbi.png",
            text: "500"
          },
        ],

        prizeId: '',

        goods: [],


        // 是否正在抽奖中，避免重复触发
        prizeing: false,

        current: -1,

        lottery_draw_param: {
          startIndex: 0, //开始抽奖位置，从0开始
          totalCount: 3, //一共要转的圈数
          winingIndex: 0, //中奖的位置，从0开始
          speed: 150 //抽奖动画的速度 [数字越大越慢,默认100]
        },

        showMask: false,
        cjImg: '/static/yushi/cj/cj20.png',

      }
    },
    onLoad() {
      // this.getPrizeList()
    },

    methods: {
      change(index) {
        console.log(index)
        this.current = index
      },
      // async getPrizeList() {
      //   let res = await this.$myRequest({
      //     url: '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.draw_list_shop&app=1',
      //     data: {
      //       openid: uni.getStorageSync('openid'),
      //     }
      //   })
      //   // 获取奖品名称
      //   this.prizeList[0].text = `收益转化率${res.data.draw_list[0]}`
      //   this.prizeList[1].text = `收益转化率${res.data.draw_list[1]}`
      //   this.prizeList[3].text = `收益转化率${res.data.draw_list[2]}`
      //   this.prizeList[4].text = `收益转化率${res.data.draw_list[3]}`
      //   this.prizeList[5].text = `收益转化率${res.data.draw_list[4]}`
      //   this.prizeList[7].text = `收益转化率${res.data.draw_list[5]}`
      //   this.goods = res.data.my_qd_list

      // },

      // 修改获奖位置（可以在这里获取后台的数据
      get_winingIndex(callback) {
        let that = this
        // if (this.current === -1) return this.$u.toast('请选择商品进行抽奖')
        if (this.prizeing) return
        this.prizeing = true


        API_Haibao.getmemberGamble().then((res) => {
          // this.$u.toast(`恭喜中奖，奖金转化率增加${res.data.draw_num}`)
          this.prizeId = res
          for (let i = 0; i < this.prizeList.length; i++) {
            if (that.prizeList[i] && Object.keys(that.prizeList[i]).length) {
              // console.log(i, that.prizeList[i].text.indexOf(that.prizeId))
              // if (that.prizeList[i].text.indexOf(that.prizeId) != -1) {
              if (that.prizeList[i].text == that.prizeId) {
                that.lottery_draw_param.winingIndex = i
                console.log(that.lottery_draw_param, i)
              }
            }
          }
          // this.lottery_draw_param.winingIndex = 7;
          //props修改在小程序和APP端不成功，所以在这里使用回调函数传参，
          callback(this.lottery_draw_param);
        }).catch(err => {
          setTimeout(() => {
            this.prizeing = false
          }, 1500)
        })
      },
      // 抽奖完成
      luck_draw_finish(param) {
        console.log(param)
        this.prizeing = false
        this.cjImg = `/static/yushi/cj/cj${this.prizeId}.png`
        console.log(this.cjImg)
        this.showMask = true
        // uni.showModal({
        //   content: `恭喜中奖，收益转化率增加${this.prizeId}`,
        //   showCancel: false,
        //   complete: () => {
        //     this.getPrizeList()
        //   }
        // })
      }

    },
  }
</script>

<style lang="scss">
  page {
    // background-color: #213781;
    background: url(/static/yushi/cj/bg.png) no-repeat 0 0;
    // background-size: cover;
  }

  .container {
    width: 100%;
    height: 100vh;
    background: url(/static/yushi/cj/bg.png) no-repeat 0 0;
    background-size: cover;
    box-sizing: border-box;
    padding-top: 410rpx;
  }

  .almost-lottery__wheel {
    text-align: center;

    .almost-lottery__count {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20rpx 0 10rpx;
    }

    .text {
      color: #FFFFFF;
      font-size: 28rpx;
    }
  }

  .almost-lottery__action-dev {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 400rpx;
    height: 80rpx;
    border-radius: 10rpx;
    text-align: center;
    background-color: red;
    margin: 0 auto 40rpx;

    .text {
      color: #FFFFFF;
      font-size: 28rpx;
    }
  }

  /deep/ .u-radio-group {
    display: block !important;
  }

  .goods_list {
    padding-bottom: 50rpx;

    .goods_item {
      width: 100%;
      height: 240rpx;
      // background: url(/static/yushi/spzs/kuang2.png) no-repeat 0 0;
      background-size: cover;
      box-sizing: border-box;
      padding: 20rpx 40rpx;

      /deep/ .u-radio__label {
        margin: 0 !important;
      }

      .goods_image {
        width: 186rpx;
        height: 186rpx;
        border-radius: 10rpx;
        margin: 0 30rpx 0 20rpx;
      }

      .right_box {
        width: 65%;
      }

      .goods_title {
        margin: 20rpx 0 0;
        font-size: 30rpx;
        color: #162579;
        margin-bottom: 6rpx;
      }

      .price {
        color: #D31431;
        margin-bottom: 6rpx;
      }


    }
  }


  .kuang_box {
    margin-top: 20rpx;
    padding-bottom: 100rpx;

    .kuang_item {
      width: 390rpx;
      height: 110rpx;
      color: #FFFFFF;
      font-size: 36rpx;
      background: url(/static/yushi/cj/kuang.png) no-repeat 0 0;
      background-size: cover;
      padding: 0 70rpx;
      margin-top: 10rpx;
    }
  }
</style>